<template>
	<view class="balance-detail" :style="{'--height':`${topHeight}rpx`}">
		<common-navbar title="余额明细"></common-navbar>
		<u-tabs :list="tabList" name='name' :is-scroll="false" inactive-color="#999999" active-color="#46a3f4"
			:current="current" @change="tabsChange" class="tabs" font-size="28" height="88" bar-height="8"
			bar-width="56"></u-tabs>
		<swiper :current="swiperCurrent" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(swiperItem, swiperIndex) in tabList" :key="swiperIndex">
				<scroll-view scroll-y class="scroll-view" @scrolltolower="onreachBottom">
					<view class="bill-item" v-for="(item,index) in 5" :key="index">
						<view class="bill-item-date">
							2022年3月
							<u-icon name="arrow-down" size="20" style="margin-left: 4rpx;" />
						</view>
						<view class="capital-flow-list">
							<view class="capital-flow-item" v-for="(citem,cindex) in 5" :key="cindex">
								<view class="capital-flow-item-left">
									<view class="capital-flow-title">
										佣金分成
									</view>
									<view class="capital-flow-time">
										2022.3.12 12:30:23
									</view>
								</view>
								<view class="capital-flow-item-right" :class="cindex%2 == 0?'increase':'decrease'">
									{{cindex%2==0?'+50.00':'-50.00'}}
								</view>
							</view>
						</view>
					</view>
					<u-loadmore :status="status" />
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{
					name: '收入'
				}, {
					name: '支出'
				}, {
					name: '全部'
				}],
				status: 'loading',
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			}
		},
		computed: {
			topHeight() {
				return (750 * this.$systemInfo.statusBarHeight / this.$systemInfo.screenWidth) + 176;
			}
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				if (index == this.current) {
					return
				}
				this.current = index;
				this.swiperCurrent = index;
			},
			animationfinish(e) {
				let current = e.detail.current;
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				console.log('滚动到底部')
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "./balanceDetail.scss";
</style>
